<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar left-arrow :fixed="true" @click-left="onClickLeft">
            <template #title>
                <span>{{shopType.shopTypeName}}</span>
            </template>
        </van-nav-bar>

        <!-- <div v-if="isLoading" 
              style="display: flex;
              justify-content: center;
              align-items: center;">
              <van-loading style="margin: auto;" size="15px">
                加载中...
              </van-loading>
        </div> -->
        <!-- 遍历商家v-else -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >

            <div class="div1">
                <div class="div"  v-for="item in list" :key="item.shopId">
                    <van-cell-group inset>
                        <Stores :item="item"/>
                    </van-cell-group>
                </div>
            </div>

        </van-list>
    </div>
</template>

<script>
import axios from 'axios';
import Stores from '../shop/Stores.vue'
export default {
    name:"ShopType",
    components:{Stores},
    props:["id"],
    data() {
        return {
            list: [],
            isLoading:true, // 是否加载完毕
            loading: false,// 数据全部加载完成
            finished: false, // 加载状态结束
            page:1, // 页码
            limit:10, // 每页数量
            container:[],
            shopType:{}
        }
    },
    methods: {
        onClickLeft(){
            // 后退一步
            this.$router.go(-1);
        },
        onLoad() {
            // 异步更新数据
            axios.get("http://localhost:9090/api/shop/getListTypeShopPaging",{
                params:{
                    page:this.page,
                    limit:this.limit,
                    shopTypesId:this.id
                }
            })        
            .then(res => {    
                if (res.data.code === 200) {
                    console.log(res.data.data);
                    this.container = res.data.data;
                }
                
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
            // setTimeout ajax 请求
            setTimeout(() => {
                for (let i = 0; i < this.container.length; i++) {
                    this.list.push(this.container[i]);
                }
                if (this.container.length === 0) {
                    this.finished = true;
                } else {
                    this.page++;
                }
                    // 加载状态结束
                    this.loading = false;
            }, 1000);
        },
        aa(){
            axios.get("http://localhost:9090/api/shop/getShopType",{
            params:{
                id:this.id
            }
            })        
            .then(res => {    
                if (res.data.code === 200) {
                    console.log(res.data.data);
                    this.shopType = res.data.data;
                }
                
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
        }
    },
    created(){
        this.aa()
    }
}
</script>

<style>
.div{
  margin-bottom:9px;
  margin-top: 9px;
}
.div1{
  margin-top: 45px;
}
</style>